<template>
  <div>
    <div class="w-full h-[77px] flex justify-center items-center flex-col">
      <div class="text-[14px] font-bold">{{ Info.name }}</div>
      <div class="mt-[5px] text-[10px]">由{{ Info.brand }}承保</div>
    </div>
    <!-- 保险日期 -->
    <div>
      <payOrderTitle title="保险日期"></payOrderTitle>
      <div class="p-[15px]">
        <div class="flex items-center justify-between">
          <div class="flex text-[14px]">
            <div class="w-[60px]">生效日期</div>
            <div class="ml-[50px]">{{ startTimer }} 00:00:00</div>
          </div>
          <div>
            <img :src="getAssetsFile('home/date.png')" class="w-[14px] h-[14px]" />
          </div>
        </div>
        <div class="border-b border-[#ECECEC] my-[15px]"></div>
        <div class="flex items-center justify-between">
          <div class="flex text-[14px]">
            <div class="w-[60px]">结束日期</div>
            <div class="ml-[50px]">{{ endTimer }} 00:00:00</div>
          </div>
          <div>
            <img :src="getAssetsFile('home/date.png')" class="w-[14px] h-[14px]" />
          </div>
        </div>
        <div class="flex items-center justify-between mt-[20px]">
          <div class="flex text-[14px]">
            <div class="w-[60px]">有效天数</div>
            <div class="ml-[50px]" :class="edit == true ? '' : 'text-[#c8c9cc]'">
              {{ daysText }}
            </div>
          </div>
          <div>
            <img :src="getAssetsFile('home/date.png')" class="w-[14px] h-[14px]" />
          </div>
        </div>
        <div class="flex items-center justify-between mt-[20px]" v-if="Info.add_text">
          <div class="flex text-[14px]">
            <div class="w-[60px]">类型</div>
            <div class="ml-[50px]" :class="edit == true ? '' : 'text-[#c8c9cc]'">
              {{ Info.add_text }}
            </div>
          </div>
          <div>
            <img :src="getAssetsFile('home/date.png')" class="w-[14px] h-[14px]" />
          </div>
        </div>
      </div>
    </div>
    <!-- 投保人信息 -->
    <div>
      <payOrderTitle title="投保人信息"></payOrderTitle>
      <div>
        <Tbrxx :infoTbrxx="infoTbrxx" :Info="Info" :edit="edit" :addInfo="Info"></Tbrxx>
      </div>
    </div>
    <!-- 附加被保人 -->
    <div
      v-if="
        Info.bx_id == 8 ||
        Info.bx_id == 7 ||
        Info.bx_id == 4 ||
        Info.bx_id == 5 ||
        Info.bx_id == 6
      "
    >
      <payOrderTitle title="附加被保人"></payOrderTitle>
      <div>
        <fjInsured :Info="Info" ref="fjInsuredRef" :edit="edit"></fjInsured>
      </div>
    </div>
    <!-- 职业类别 -->
    <div v-if="Info.bx_id == 1 || Info.bx_id == 3">
      <payOrderTitle title="职业类别"></payOrderTitle>
      <div>
        <category :category="categoryArr" :Info="infoCategory" :edit="edit"></category>
      </div>
    </div>
    <!-- 施工地址 -->
    <div v-if="Info.bx_id == 3">
      <payOrderTitle title="施工地址"></payOrderTitle>
      <div>
        <addressVue :edit="edit" :addInfo="Info"></addressVue>
      </div>
    </div>
    <div
      v-if="
        Info.bx_id != 1 &&
        Info.bx_id != 3 &&
        Info.bx_id != 4 &&
        Info.bx_id != 5 &&
        Info.bx_id != 6
      "
    >
      <payOrderTitle title="标的要素"></payOrderTitle>
      <div>
        <ys :Info="Info" :bx_id="Info.bx_id" :edit="edit"></ys>
      </div>
    </div>
    <!-- 保险责任 -->
    <div v-if="Info.bx_id != 4 && Info.bx_id != 5 && Info.bx_id != 6">
      <payOrderTitle title="保险责任"></payOrderTitle>
      <div>
        <responsibility
          :duty="Info.duty"
          :start_time="startTimer"
          :end_time="endTimer"
          ref="responsibilityRef"
          :edit="edit"
          :add_price="Info.add_price"
        ></responsibility>
      </div>
    </div>
    <!-- 被保人清单 -->
    <div v-if="Info.bx_id == 1 || Info.bx_id == 3">
      <payOrderTitle title="被保人清单"></payOrderTitle>
      <div>
        <user :user="userArr" :edit="edit"></user>
      </div>
    </div>
    <!-- 发票信息 -->
    <div v-if="Info.is_apply">
      <payOrderTitle title="发票信息"></payOrderTitle>
      <div>
        <fpProfile :fpInfo="Info.invoice"></fpProfile>
      </div>
    </div>
    <!-- 保单信息 -->
    <div v-if="Info.state == 2">
      <payOrderTitle title="保单信息"></payOrderTitle>
      <div>
        <bdProfile :bdInfo="Info" @getInfo="getInfo"></bdProfile>
      </div>
    </div>
    <!-- 支付信息 -->
    <div>
      <payOrderTitle title="支付信息"></payOrderTitle>
      <payMode :info="Info"></payMode>
    </div>
    <div class="w-full h-[60px] flex items-center ios" v-if="!Info.is_apply">
      <div
        v-if="!Info.fp_url"
        @click="openFp(1)"
        class="h-[60px] w-full flex mr-[20px] justify-center items-center text-white"
        style="background: linear-gradient(180deg, #f3a140 0%, #f38e40 100%)"
      >
        申请专票
      </div>
      <div
        v-if="!Info.fp_url"
        @click="openFp(2)"
        class="h-[60px] w-full flex justify-center items-center text-white"
        style="background: linear-gradient(180deg, #f3a140 0%, #f38e40 100%)"
      >
        获取电子发票
      </div>
      <div
        v-if="Info.fp_url"
        @click="downloadFp"
        class="h-[60px] w-full flex justify-center items-center text-white"
        style="background: linear-gradient(180deg, #f3a140 0%, #f38e40 100%)"
      >
        下载电子发票
      </div>
    </div>
    <!-- 专票 -->
    <van-popup round v-model:show="popShow" position="center">
      <div class="p-[10px]">
        <div class="text-center">申请专票</div>
        <van-cell-group inset>
          <van-field
            v-model="form.invoice_name"
            name="纳税人名称"
            label="纳税人名称"
            placeholder="请输入纳税人名称"
          />
          <van-field
            v-model="form.invoice_no"
            name="纳税人识别号"
            label="纳税人识别号"
            placeholder="请输入纳税人识别号"
          />
          <van-field
            v-model="form.invoice_mobile"
            name="税务登记号码"
            label="税务登记号码"
            placeholder="请输入税务登记号码"
          />
          <van-field
            v-model="form.invoice_bank"
            name="税务开户银行名称"
            label="税务开户银行名称"
            placeholder="请输入税务开户银行名称"
          />
          <van-field
            v-model="form.invoice_bank_no"
            name="税务开户银行账号"
            label="税务开户银行账号"
            placeholder="请输入税务开户银行账号"
          />
          <van-field
            v-model="form.invoice_address"
            name="税务登记地址"
            label="税务登记地址"
            placeholder="请输入税务登记地址"
          />
          <van-field
            v-model="form.name"
            name="姓名"
            label="姓名"
            placeholder="请输入姓名"
          />
          <van-field
            v-model="form.mobile"
            name="手机号"
            label="手机号"
            placeholder="请输入手机号"
          />
          <van-field
            v-model="form.address"
            name="收件详细地址"
            label="收件详细地址"
            placeholder="请输入收件详细地址"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" @click="onSubmit"> 提交 </van-button>
        </div>
      </div>
    </van-popup>
    <!-- 资料文件 -->
    <!-- <div>
      <payOrderTitle title="资料文件"></payOrderTitle>
      <div>
        <dataFiles></dataFiles>
      </div>
    </div> -->
  </div>
</template>
<script setup lang="ts">
import payOrderTitle from "@/view/mine/payOrder/payOrderTitle.vue";
import Tbrxx from "./tbrxx.vue";
import getAssetsFile from "@/utils/getImageurl";
import fjInsured from "./fjInsured.vue";
import ys from "./ys.vue";
import bdProfile from "./bdProfile.vue";
import responsibility from "./responsibility.vue";
import user from "./user.vue";
import category from "./category.vue";
import { getTime } from "@/utils/tools";
import addressVue from "./address.vue";
import fpProfile from "./fpProfile.vue";
import { orderDetail, getInvoice, applyInvoice } from "@/utils/api";
// import dataFiles from "@/view/mine/payOrder/dataFiles.vue";
import { ref, reactive } from "vue";
import { useRoute } from "vue-router";
import { showToast } from "vant";
import payMode from "./payMode.vue";
const route = useRoute();
const startTimer = ref();
const endTimer = ref();
const edit = ref(false);
const days = ref();
const popShow = ref(false);
const categoryArr = ref([] as any);
const userArr = ref([] as any);
const Info = ref({} as any);
const daysText = ref("");
const infoTbrxx = reactive<infoTbrxxType>({
  name: "",
  card_type: "",
  card_no: "",
  contact: "",
  contact_mobile: "",
  mailbox: "",
  insure_type: "",
  address: "",
});
const infoCategory = reactive<categoryInfoType>({
  job_code: "",
  category: "",
  bx_id: "",
});
const form = ref({
  id: "", //订单id
  invoice_name: "", //纳税人名称
  invoice_no: "", //纳税人识别号
  invoice_mobile: "", //税务登记号码
  invoice_bank: "", //税务开户银行名称
  invoice_bank_no: "", //税务开户银行账号
  invoice_address: "", //税务登记地址
  name: "", //收件人
  mobile: "",
  address: "", //收件详细地址
});
const getInfo = async () => {
  const res = await orderDetail({ order_no: route.query.order_no });
  edit.value = false;
  let key: keyof infoTbrxxType;
  for (key in infoTbrxx) {
    infoTbrxx[key] = res.msg.insure[key];
  }

  infoCategory.category = res.msg.job_code_name;
  infoCategory.job_code = res.msg.job_code;
  infoCategory.bx_id = res.msg.bx_id;
  userArr.value = res.msg.user;
  Info.value = res.msg;
  Info.value.name = res.msg.bx_info.name;
  Info.value.brand = res.msg.bx_info.brand;
  startTimer.value = res.msg.start_time;
  endTimer.value = res.msg.end_time;
  form.value.id = res.msg.id;
  let star = new Date(startTimer.value).getTime();
  let end = new Date(endTimer.value).getTime();

  days.value = (end - star) / (1000 * 3600 * 24) + 1;
  xsDays();
};
getInfo();
//回显时间
const xsDays = () => {
  let s = getTime(startTimer.value);
  let e = getTime(endTimer.value);
  let d = (e - s) / 1000 / 3600 / 24;

  if (d > 0 && d <= 7) {
    daysText.value = "7天";
  } else if (d > 7 && d <= 31) {
    daysText.value = "1个月";
  } else if (d > 31 && d <= 94) {
    daysText.value = "3个月";
  } else if (d > 94 && d <= 186) {
    daysText.value = "6个月";
  } else {
    daysText.value = "1年";
  }
};
//开发票
const openFp = async (index: number) => {
  //1是开专票 2是发票
  if (index == 1) {
    popShow.value = true;
  } else {
    //开发票
    const res = await getInvoice({ id: Info.value.id });
    showToast(res.msg);
    getInfo();
  }
};
//下载发票
const downloadFp = () => {
  window.location.href = Info.value.fp_url;
};
//开专票
const onSubmit = async () => {
  const res = await applyInvoice(form.value);
  if (res.code == 1) {
    showToast(res.msg);
    popShow.value = false;
    getInfo();
  }
};
</script>
<style scoped lang="scss"></style>
